<template>
<view>
<template name="apifmLogin">
	<view class="apifmLogin" :hidden="ttlogin">
		<view class="s-b">
			<view class="s-l-b">
				<image src="/static/images/nologin.png"></image>
				<text>授权登录</text>
			</view>
			<view class="s-t-b">
				<view class="s-t-i">
					<text>·</text>
					请授权小程序登录
				</view>
				<view class="s-t-i">
					<text>·</text>
					我们不会公布您的这些信息
				</view>
				<view class="s-t-i">
					<text>·</text>
					只是为了给您提供更好的服务
				</view>
			</view>
			<button class="l" open-type="getUserInfo" @getuserinfo="processLogin">允许
			</button>
			<button class="c" @tap="cancelLogin" type="default">暂不登录
			</button>
		</view>
	</view>
</template>
</view>
</template>

<script>

export default {
  data() {
    return {
      ttlogin: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function (options) {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    
  }
};
</script>
<style>
.apifmLogin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999999999;
}

.apifmLogin .s-b {
  width: 70%;
  margin: 0 auto;
  height: 600rpx;
  background-color: #fff;
  margin-top: 40%;
  border-radius: 10rpx;
}

.apifmLogin .s-b .s-l-b {
  text-align: center;
  width: 80%;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 auto;
  padding-top: 20px;
}

.apifmLogin .s-b .s-l-b image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
.apifmLogin .s-b .s-l-b text {
  font-size: 32rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  color: #333;
}

.apifmLogin .s-b .s-t-b {
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  text-align: center;
}

.apifmLogin .s-b .s-t-b .s-t-n {
  font-size: 30rpx;
  color: #333;
  width: 80%;
  margin: 0 auto;
}

.apifmLogin .s-b .s-t-b .s-t-i {
  width: 80%;
  margin: 0 auto;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.apifmLogin .s-b .s-t-b .s-t-i text {
  margin-right: 10rpx;
  font-size: 26rpx;
}

.apifmLogin .s-b button::after {
  border-radius: 4rpx;
  border: 0;
}

.apifmLogin .s-b .l {
  width: 80%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  background-color: #04be01;
  color: #fff;
}

.apifmLogin .s-b .c {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  width: 80%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  background-color: #ccc;
  color: #333;
}
</style>